<template>
    <div class=" container-announ-auth">
        <a-modal width="1300px" :visible="visible" title="信息列表" @cancel="closeModal"
            class=" yuan-container yuan-modal showEditList-edit" :dialog-style="{ top: '20px' }">
            <a-spin tip="Loading..." :spinning="loading">
                <div class="filter-panel">
                    <a-button style="float:right" type="primary" class="filter-list" @click="clickAdd">新增公示</a-button>
                </div>
                <div class="table" style="background: #fff;padding:10px">
                    <a-table bordered :rowKey="(item,i)=>item.publicityId" :columns="columns" :data-source="pageList"
                        :pagination="pagination">
                        <template slot='action' slot-scope="text, record, index">
                            <div>

                                <a-button type="primary" @click="clickEdit(record)"
                                    v-if="record.formulaAuditState!==2">修改</a-button>
                                <a-button style="margin-left:10px" type="primary" @click="clickShow(record)">详情</a-button>

                                <template v-if="userInfo.roleName==='后台' || userInfo.roleName==='管理员'">
                                    <a-button style="margin-left:10px" type="warning" @click="clickFormula(record)"
                                        v-if="record.formulaAuditState===1">一键公示</a-button>
                                    <a-button style="margin-left:10px" type="danger" @click="clickDelete(record)">删除</a-button>
                                    <a-button style="margin-left:10px" type="danger" @click="clickCancel(record)"
                                        v-if="record.formulaAuditState===2">取消公示</a-button>
                                </template>

                            </div>
                        </template>
                    </a-table>
                </div>
            </a-spin>

            <template slot="footer">
                <a-button @click="closeModal">
                    取消
                </a-button>
            </template>
        </a-modal>

        <KJRDetail :visible="editVisible" @closeModal="() => editVisible = false" :editInfo="editInfo" :isShow="isShow"
            v-if="pageType==='KJR'" :rowInfo="rowInfo" @resetList="getList" />
        <GXRDetail :visible="editVisible" @closeModal="() => editVisible = false" :editInfo="editInfo" :isShow="isShow"
            :rowInfo="rowInfo" @resetList="getList" v-else />
    </div>
</template>

<script lang="ts">
import api from "@/api/api";
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import { h } from "vue";
import KJRDetail from "./KJRDetail.vue";
import GXRDetail from "./GXRDetail.vue";
import { getStorageUserInfo } from "@/utils";
@Component({
    name: "dom",
    components: { GXRDetail, KJRDetail },
})
export default class index extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: {} }) rowInfo!: any;
    @Prop({ default: "" }) pageType!: string;

    @Watch("visible")
    visibleChange() {
        if (this.visible) {
            this.getList();
        }
    }
    pagination = {
        current: 1,
        pageSize: 10,
        total: 0,
        onChange: this.pageChange,
    };
    columns = [
        {
            align: "center",
            dataIndex: "createTime",
            key: "createTime",
            title: "新增公示时间",
        },
        {
            align: "center",
            dataIndex: "operator",
            key: "operator",
            title: "操作人",
        },
        {
            align: "center",
            dataIndex: "publicityTime",
            key: "publicityTime",
            title: "发布时间",
        },
        {
            align: "center",
            dataIndex: "formulaAuditState",
            key: "formulaAuditState",
            title: "状态",
            customRender: (text: string, record: any, index: number) => {
                const data = {
                    0: { title: "待填写", class: "status-words c-warning" },
                    1: { title: "已填写", class: "status-words c-primary" },
                    2: { title: "已公示", class: "status-words c-success" },
                };
                const dataOne = data[record.formulaAuditState] || {};
                const dom = h("div", { class: dataOne.class }, dataOne.title);
                return dom;
            },
        },
        {
            align: "center",
            dataIndex: "action",
            key: "action",
            title: "操作",
            width: 380,
            scopedSlots: { customRender: "action" },
        },
    ];
    loading = false;
    userInfo: any = {};
    async mounted() {
        this.userInfo = getStorageUserInfo();
    }
    closeModal() {
        this.$emit("closeModal");
    }
    async modalOk() {
        this.loading = true;
        try {
            // const res = await warningApi.planAdd(this.sureInfo);
            // this.$message.success(res.msg);
            this.closeModal();
        } finally {
            this.loading = false;
        }
    }

    pageList: any = [];
    async getList() {
        this.loading = true;
        try {
            const res = await api.getAnPublicityInfo({ id: this.rowInfo.id, publicityType: this.pageType });
            //this.detailInfo = { ...res.data.auditData, ...res.data };
            this.pageList = res.data || [];
        } finally {
            this.loading = false;
        }
    }
    pageChange(page: number, pageSize: number) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = page;
        this.getList();
    }
    isShow = false;
    editInfo = {};
    editVisible = false;
    clickEdit(item) {
        this.isShow = false;
        this.editInfo = item;
        this.editVisible = true;
    }
    clickAdd() {
        this.isShow = false;
        this.editInfo = {};
        this.editVisible = true;
    }
    clickShow(item) {
        this.isShow = true;
        this.editInfo = item;
        this.editVisible = true;
    }

    clickFormula(item) {
        this.$confirm({
            title: "确定要进行公示吗？",
            okText: "确定",
            cancelText: "取消",
            onOk: async () => {
                this.loading = true;
                try {
                    const res = await api.postFormula({ id: item.publicityId, publicityType: this.pageType });
                    this.$message.success("操作成功");
                    this.getList();
                } finally {
                    this.loading = false;
                }
            },
            onCancel: () => {
                console.log("Cancel");
            },
        });
    }
    clickCancel(item) {
        this.$confirm({
            title: "确定要取消公示吗？",
            okText: "确定",
            cancelText: "取消",
            onOk: async () => {
                this.loading = true;
                try {
                    const res = await api.cancelFormula({ id: item.publicityId, publicityType: this.pageType });
                    this.$message.success("操作成功");
                    this.getList();
                } finally {
                    this.loading = false;
                }
            },
            onCancel: () => {
                console.log("Cancel");
            },
        });
    }
    clickDelete(item) {
        this.$confirm({
            title: "确定要删除公示吗？",
            okText: "确定",
            cancelText: "取消",
            onOk: async () => {
                this.loading = true;
                try {
                    const res = await api.deleteAnPublicityInfo({ id: item.publicityId, publicityType: this.pageType });
                    this.$message.success("操作成功");
                    this.getList();
                } finally {
                    this.loading = false;
                }
            },
            onCancel: () => {
                console.log("Cancel");
            },
        });
    }
}
</script>

<style lang="scss">
.showEditList-edit {
}
</style>
